<template>
  <el-container>
    <splitpanes class="default-theme">
      <pane size="20">
        <el-scrollbar :height="height">
          <el-header>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="groupFilterText"
              clearable
            ></el-input>
          </el-header>
          <el-tree
            ref="group"
            class="menu"
            node-key="id"
            :data="groupData"
            :current-node-key="''"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
            :filter-node-method="groupFilterNode"
            @node-click="groupClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span style="margin-right: 2px">
                  <el-icon>
                    <component :is="data.icon" />
                  </el-icon>
                </span>
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </el-scrollbar>
      </pane>
      <pane size="85">
        <el-main style="padding: 0px; overflow: hidden; position: relative">
          <el-skeleton v-if="nodeType == ''" :rows="10" />
          <base-data v-else-if="nodeType === 'root'" v-model="form"></base-data>
          <method-List
            v-else-if="nodeType === 'methodList'"
            v-model="dataList"
            :addTemplate="template"
            @update="getMethodList"
          />
          <coding-list
            v-else-if="nodeType === 'codingRules'"
            v-model="dataList"
            @addCoding="addCoding"
            @toDetail="getCoding"
            @update="getCodingRules"
            @delete="getInit"
          ></coding-list>
          <coding
            v-else-if="nodeType === 'codingRuleField'"
            v-model="form"
            v-model:dataList="dataList"
            :addTemplate="addTemplate"
            :configData="configData"
            @update="getCoding"
            @init="getInit"
          ></coding>
          <validator-list
            v-else-if="nodeType === 'validations'"
            v-model="dataList"
            @addValidator="addValidator"
            @toDetail="getValidator"
            @update="getValidatorList"
            @delete="getInit"
          />
          <validator
            v-else-if="nodeType === 'validationGroup'"
            v-model="form"
            v-model:dataList="dataList"
            :addTemplate="addTemplate"
            :configData="configData"
            @update="getValidator"
            @init="getInit"
          ></validator>
          <data-Rules
            v-else-if="nodeType === 'dataRules'"
            v-model="dataList"
            @addDataRule="addDataRule"
            @toDetail="getDataRule"
            @update="getDataRules"
            @delete="getInit"
          ></data-Rules>
          <data-rule
            v-else-if="nodeType === 'dataRule'"
            v-model="form"
            v-model:dataList="dataList"
            :addTemplate="addTemplate"
            :configData="configData"
            @update="getDataRule"
            @init="getInit"
          ></data-rule>
        </el-main>
      </pane>
    </splitpanes>
  </el-container>
</template>
  
  <script setup>
import { ref, onMounted, watch, provide, readonly, computed } from "vue";
import { useRoute } from "vue-router";
import {
  Expand,
  Fold,
  ArrowLeftBold,
  ArrowRightBold,
} from "@element-plus/icons-vue";
import API from "@/api/model/meta.js";
import baseData from "./components/baseData.vue";
import methodList from "./components/methodList.vue";
import codingList from "./components/codingList.vue";
import coding from "./components/coding.vue";
import validatorList from './components/validatorList.vue'
import validator from "./components/validator.vue";
import dataRules from './components/dataRules.vue'
import dataRule from './components/dataRule.vue'
import tool from '@/utils/tool'
const route = useRoute();
const groupData = ref([]);
const group = ref(null);
const groupFilterText = ref();
const form = ref({});
const fileName = ref();
const nodeType = ref();
const dataList = ref([]);
const template = ref({});
const configData = ref([]);
const settingNode = ref();
const addTemplate = ref({});

// let scrollingDiv;
// let scrollHeight;
// let scrollTop = 0;
// let scrollSpeed = 0.5; // 滚动速度，可以根据需要调整
// let scrollDirection = 1; // 1 表示向下，-1 表示向上
// let isPaused = false;
// const layout = ref([
//   { x: 0, y: 0, w: 2, h: 2, i: "0" },
//   { x: 2, y: 0, w: 2, h: 2, i: "1" },
//   { x: 4, y: 0, w: 2, h: 2, i: "2" },
//   { x: 0, y: 1, w: 6, h: 2, i: "3" },
// ]);
const height = computed(() => {
  let h;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  return h - 90;
});
provide("fileName", readonly(fileName));
watch(groupFilterText, (val) => {
  group.value.filter(val);
});
onMounted(() => {
  // scrollingDiv = document.getElementById("scrollingDiv");
  // scrollHeight = scrollingDiv.scrollHeight;
  fileName.value = route.query.fileName;
  getInit();
  getRoot();
});

const getInit = async () => {
  let res = await API.businessrule.jsonOutline.post({
    fileName: fileName.value,
  });
  if (res.code == "200") {
    groupData.value = res.dataList;
  }
  console.log(res);
};
const getRoot = async () => {
  nodeType.value = "";
  let res = await API.businessrule.detail.post({ fileName: fileName.value });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data;
    nodeType.value = "root";
  }
};
const getMethodList = async () => {
  nodeType.value = "";
  let res = await API.businessrule.methodList.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    template.value = res.data;
    dataList.value = res.dataList;
    nodeType.value = "methodList";
  }
};
const getCodingRules = async () => {
  nodeType.value = "";
  let res = await API.businessrule.getCodeList.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    dataList.value = res.dataList;
    nodeType.value = "codingRules";
  }
};
const addCoding = async () => {
  nodeType.value = "";
  let res = await API.businessrule.addCode.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data;
    addTemplate.value = res.dtl;
    configData.value = res.configData;
    dataList.value = [];
    nodeType.value = "codingRuleField";
  }
};
const getCoding = async (val) => {
  nodeType.value = "";
  let res = await API.businessrule.detailCode.post({
    fileName: fileName.value,
    fieldId: val.fieldId || val.id,
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data;
    addTemplate.value = res.dtl;
    configData.value = res.configData;
    dataList.value = res.dataList;
    nodeType.value = "codingRuleField";
  }
};
const getValidationList = async () => {
  nodeType.value = "";
  let res = await API.businessrule.getValidatorList.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    dataList.value = res.dataList;
    nodeType.value = "validations";
  }
};
const addValidator = async()=>{
  nodeType.value = "";
  let res = await API.businessrule.addValidator.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data
    configData.value = res.configData
    dataList.value = [];
    res.dtl.params = tool.convert.mapToArr(res.dtl.params)
    addTemplate.value = res.dtl
    nodeType.value = "validationGroup";
  }
}
const getValidator = async(val) =>{
  console.log(val)
  nodeType.value = "";
  let res = await API.businessrule.detailValidator.post({
    fileName: fileName.value,
    objectId:val.objectId||val.id
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data
    configData.value = res.configData
    dataList.value =res.dataList || [];
    if(dataList.value){
      dataList.value.forEach(ele=>{
        ele.params = tool.convert.mapToArr(ele.params)
      })
    }
    res.dtl.params = tool.convert.mapToArr(res.dtl.params)
    addTemplate.value = res.dtl
    nodeType.value = "validationGroup";
  }
}
const getDataRules =async()=>{
  nodeType.value = "";
  let res = await API.businessrule.getDataList.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    dataList.value = res.dataList;
    nodeType.value = "dataRules";
  }
}
const addDataRule = async()=>{
  nodeType.value = "";
  let res = await API.businessrule.addData.post({
    fileName: fileName.value,
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data
    configData.value = res.configData
    dataList.value = [];
    addTemplate.value = res.dtl
    res.dtl.dataset = {}
    res.dtl.fieldMap = tool.convert.mapToArr(res.dtl.fieldMap)
    nodeType.value = "dataRule";
  }
}
const getDataRule = async(val) =>{
  console.log(val)
  nodeType.value = "";
  let res = await API.businessrule.detailData.post({
    fileName: fileName.value,
    objectId:val.objectId||val.id
  });
  console.log(res);
  if (res.code == "200") {
    form.value = res.data
    configData.value = res.configData
    dataList.value =res.dataList || [];
    if(dataList.value){
      dataList.value.forEach(ele=>{
        ele.fieldMap = tool.convert.mapToArr(ele.fieldMap)
      })
    }
    res.dtl.fieldMap = tool.convert.mapToArr(res.dtl.fieldMap)
    addTemplate.value = res.dtl
    nodeType.value = "dataRule";
  }
}
const strategies = {
  root: getRoot,
  methodList: getMethodList,
  codingRules: getCodingRules,
  sequenceField: getCoding,
  validations: getValidationList,
  validationGroup:getValidator,
  dataRules:getDataRules,
  dataRule:getDataRule
};
const groupClick = (data, node) => {
  console.log(data);
  settingNode.value = data;
  strategies[data.nodeType](data);
};
</script>
  
  <style lang="less" scoped>
.side-bottom:hover {
  color: var(--el-color-primary);
}
.side-bottom {
  margin-left: -20px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  position: absolute;
  top: 50%;
  z-index: 9999;
}
.side-bottom i {
  margin-top: 12px;
  margin-left: 8px;
  font-size: 14px;
}
.scroll-container {
  height: 70px; /* 设置你希望的高度 */
  overflow: auto; /* 允许内容溢出时滚动 */
  position: relative; /* 可能需要这个属性以便使用CSS动画或JavaScript进行定位 */
}
</style>
  